<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="10" openlmis-message="label.vaccine.coverage.monthly.coverage"></th>
      <th colspan="5" openlmis-message="label.vaccine.coverage.cumulative.coverage"></th>
    </tr>
    <tr>
      <th colspan="4" openlmis-message="label.vaccine.coverage.within.catchment"></th>
      <th colspan="4" openlmis-message="label.vaccine.coverage.outside.catchment"></th>
      <th colspan="2" openlmis-message="label.vaccine.coverage.total.vaccination"></th>
      <th colspan="2" openlmis-message="label.vaccine.coverage.within.catchment"></th>
      <th colspan="2" openlmis-message="label.vaccine.coverage.outside"></th>
      <th  openlmis-message="label.vaccine.coverage.total"></th>
    </tr>
    <tr>
      <th openlmis-message="label.vaccine.coverage.male"></th>
      <th openlmis-message="label.vaccine.coverage.female"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>
      <th openlmis-message="label.vaccine.coverage.coverage"></th>
      <th openlmis-message="label.vaccine.coverage.male"></th>
      <th openlmis-message="label.vaccine.coverage.female"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>
      <th openlmis-message="label.vaccine.coverage.coverage"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>
      <th openlmis-message="label.vaccine.coverage.coverage"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>
      <th openlmis-message="label.vaccine.coverage.coverage"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>
      <th openlmis-message="label.vaccine.coverage.coverage"></th>
      <th openlmis-message="label.vaccine.coverage.total"></th>

    </tr>
  </thead>
  <tbody>
  <tr ng-repeat-start="(productId, productGroup) in report.coverageLineItemViews"></tr>
  <tr ng-repeat-start="dose in productGroup">
    <td class="cell-input col-general" >
      <input  numeric-validator="positiveInteger" maxlength="8" ng-disabled="true" ng-model="dose.regularMale" type="text" />
    </td>
    <td  class="cell-input col-general">
      <input numeric-validator="positiveInteger" maxlength="8" ng-disabled="true" ng-model="dose.regularFemale" type="text" />
    </td>
    <td class="cell-input col-general" style="text-align: right"><span class="cell-text number">{{dose.getTotalRegular() | number : 0}}</span></td>
    <td class="cell-input col-general" style="text-align: right">
      <span
          class="cell-text number"
          ng-class="{'bad' : (dose.getRegularCoveragePercentage() < 31 || dose.getRegularCoveragePercentage() > 100) ,
                    'warn' : (dose.getRegularCoveragePercentage() > 30 && dose.getRegularCoveragePercentage() < 71),
                    'good' : dose.getRegularCoveragePercentage() > 70 && dose.getRegularCoveragePercentage() <= 100 }"
      > {{dose.getRegularCoveragePercentage() | number : 2}}%</span></td>
    <td class="cell-input col-general" >
      <input  numeric-validator="positiveInteger" maxlength="8" ng-disabled="true" ng-model="dose.outreachMale" type="text" />
    </td>
    <td  class="cell-input col-general">
      <input numeric-validator="positiveInteger" maxlength="8" ng-disabled="true" ng-model="dose.outreachFemale" type="text" />
    </td>
    <td class="cell-input col-general" style="text-align: right">
      <span class="cell-text">{{dose.getTotalOutreach() | number : 0}}</span>
    </td>
    <td class="cell-input col-general" style="text-align: right">
      <span
          class="cell-text"
          ng-class="{'bad' : (dose.getOutreachCoveragePercentage() < 31 || dose.getOutreachCoveragePercentage() > 100) ,
                  'warn' : (dose.getOutreachCoveragePercentage() > 30 && dose.getOutreachCoveragePercentage() < 71),
                  'good' : dose.getOutreachCoveragePercentage() > 70 && dose.getOutreachCoveragePercentage() <= 100 }"
      > {{dose.getOutreachCoveragePercentage() | number : 2}} %</span></td>
    <td class="cell-input col-general" style="text-align: right">
      <span class="cell-text number">{{dose.getMonthlyTotal() | number : 0}}</span>
    </td>
    <td class="cell-input col-general" style="text-align: right"><span class="cell-text number">{{ dose.getMonthlyCoverage() | number : 2 }} %</span></td>
    <td class="cell-input col-general" style="text-align: right"><span class="cell-text number">{{dose.getTotalAnnualRegular() | number : 0}}</span></td>
    <td class="cell-input col-general" style="text-align: right">
      <span
          class="cell-text number"
          ng-class="{'bad' : (dose.getTotalAnnualRegularCoveragePercentage() < 31 || dose.getTotalAnnualRegularCoveragePercentage() > 100) ,
                  'warn' : (dose.getTotalAnnualRegularCoveragePercentage() > 30 && dose.getTotalAnnualRegularCoveragePercentage() < 71),
                  'good' : dose.getTotalAnnualRegularCoveragePercentage() > 70 && dose.getTotalAnnualRegularCoveragePercentage() <= 100 }"
      >{{dose.getTotalAnnualRegularCoveragePercentage() | number : 2}}%</span>
    </td>
    <td class="cell-input col-general" style="text-align: right">
      <span class="cell-text number">{{dose.getTotalAnnualOutreach() | number : 0}}</span>
    </td>
    <td class="cell-input col-general" style="text-align: right">
      <span
          class="cell-text number"
          ng-class="{'bad' : (dose.getTotalAnnualOutreachCoveragePercentage() < 31 || dose.getTotalAnnualOutreachCoveragePercentage() > 100) ,
                  'warn' : (dose.getTotalAnnualOutreachCoveragePercentage() > 30 && dose.getTotalAnnualOutreachCoveragePercentage() < 71),
                  'good' : dose.getTotalAnnualOutreachCoveragePercentage() > 70 && dose.getTotalAnnualOutreachCoveragePercentage() <= 100 }"
      >{{dose.getTotalAnnualOutreachCoveragePercentage() | number : 2}}%</span>
    </td>
    <td class="cell-input col-general" style="text-align: right"><span class="cell-text number">{{dose.getAnnualTotal() | number : 0}}</span></td>
  </tr>
  <tr ng-repeat-end></tr>
  <tr ng-repeat-end></tr>
</table>
